<section id="bill-detail">
	<div class="bill-edit-head border-b">应收账款-收款详情</div>
	<div class="bill-boxshadow">
		<div class="bill-due-to"><b class="icon-GM-bill"></b><span class="color-orange">账期 {{billData.beginDate | timestamp}}
				至 {{billData.endDate | timestamp}}</span></div>
	</div>
	<div class="bill-contract-content">
		<div class="clearfix">
			<h1 class="pull-left font-16" style="margin:0;line-height:34px;"><strong>结算信息</strong></h1>
		</div>


		<div class="dy-flex">
			<div class="dy-fx-1">账单编号：<span class="ml-24">{{billData.no}}</div>
			<div class="dy-fx-1">账单类型：<span class="ml-24">{{billData.billTypeName || '--'}}</div>
			<div class="dy-fx-1"></div>
		</div>

		<div class="dy-flex" v-if=" billData.billTypeCode == 'C' || billData.billTypeCode == 'T' ">
			<div class="dy-fx-1">管理编号：<a :href="'#/contractNewDeatil?id='+idA.idb+'&ddtab=true'" class="ml-24">{{contractData.mCode}}</a></div>
			<div class="dy-fx-1">合同编号：<a :href="'#/contractNewDeatil?id='+idA.idb+'&ddtab=true'" class="ml-24">{{contractData.cCode}}</a></div>
			<div class="dy-fx-1">合同名称：<span class="ml-24">{{contractData.contractName ? contractData.contractName : '--'}}</span></div>
		</div>

		<div class="dy-flex" v-if=" billData.billTypeCode == 'YX' ||  billData.billTypeCode == 'YXTK' ">
			<div class="dy-fx-1">意向编号：<span class="ml-24">{{billData.intentCode}}</div>
		</div>
		<div class="dy-flex" v-if=" billData.billTypeCode == 'T' ">
			<div class="dy-fx-1">退租编号：<span class="ml-24">{{billData.withdrawCode}}</div>
		</div>

		<div class="bill-customer">客户：<span class="ml-24">{{contractData.zlfCompany || '--'}}</span></div>
		<div class="bill-as-of-date" v-if="!isEditCountMes">收款截止日：<span class="ml-24">{{billData.deadlineDate | timestamp}}</span></div>

		<div class="dy-flex line-height-34 mt-5 receiptDeadlineDate" v-if=" billData.billState == 'WTJ' && isEditCountMes">
			<div class="fl">收款截止日:</div>
			<div class="fl ml-24">
				<div style="width: 150px;">
					<web-calendar v-model="receiptDeadlineDate" @change="receiptDeadlineDateChange"></web-calendar>
				</div>
			</div>
		</div>

		<div class="bill-state">状态：
			<span class="ml-24 color-orange">
				<b>{{billData.paymentState | billState}}</b>
				<b class="ml-10 mr-10">{{billData.overdueState | billState}}</b>
				<b>{{billData.billState | billState}}</b>
			</span>
		</div>

	</div>
	<!-- 出租资源 -->
	<div class="rent-resource">
		<h3 class="font-16">出租资源</h3>
		<!-- 单元 -->
		<div v-if="building.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">单元<span>({{Number(totalArea).toFixed(2)}}m²)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('unit')">
					<span style="color:#337ab7" v-if="!unitOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="unitOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!unitOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="unitOpenFlag">
				</div>
			</div>
			<div class="unit-table" v-if="unitOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-2">项目</div>
					<div class="dy-fx-2">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-4">单元</div>
				</div>
				<div class="tb-content">
					<ul class="dy-flex project-cr">
						<li class="dy-fx-2 project">{{contractData.projectName}}</li>
						<li class="dy-fx-7">
							<!-- 楼栋 -->
							<ul class="dy-flex building-cr" v-for="(item,index) in building">
								<li class="dy-fx-2 building">{{item.buildingName}}</li>
								<li class="dy-fx-5">
									<!-- 楼层 -->
									<ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
										<li class="dy-fx-1 floor">{{item1.floorName || '--'}}</li>
										<li class="dy-fx-4 unit">
											<!-- 单元 -->
											<b v-for="(item2,index2) in item1.unit" style="float:left">{{item2}}<i v-if="index2 + 1 !== item1.unit.length">、</i></b>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 工位 -->
		<div v-if="wp.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">工位<span>({{wpTotalNum}}个)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('wp')">
					<span style="color:#337ab7" v-if="!wpOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="wpOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!wpOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="wpOpenFlag">
				</div>
			</div>
			<div class="position-table border" v-if="wpOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-3">项目</div>
					<div class="dy-fx-3">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-1">单元</div>
					<div class="dy-fx-1">工位数</div>
					<div class="position-item">工位</div>
				</div>
				<ul class="tb-content line-height-40">
					<li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId" :floorId="item.floorId"
					 :unitId="item.unitId">
						<div class="dy-fx-3">{{contractData.projectName}}</div>
						<div class="dy-fx-3">{{item.buildingName}}</div>
						<div class="dy-fx-1">{{item.floorName || '--'}}</div>
						<div class="dy-fx-1">{{item.unitName}}</div>
						<div class="dy-fx-1">{{item.positions.length}}</div>
						<div class="position-item">
							<span class="position">
								<b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 车位 -->
		<div v-if="st.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">车位<span>({{stTotalNum}}个)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('st')">
					<span style="color:#337ab7" v-if="!stOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="stOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!stOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="stOpenFlag">
				</div>
			</div>
			<div class="position-table border" v-if="stOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-3">项目</div>
					<div class="dy-fx-3">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-1">单元</div>
					<div class="dy-fx-1">车位数</div>
					<div class="position-item">车位</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId" :floorId="item.floorId"
					 :unitId="item.unitId">
						<div class="dy-fx-3">{{contractData.projectName}}</div>
						<div class="dy-fx-3">{{item.buildingName}}</div>
						<div class="dy-fx-1">{{item.floorName || '--'}}</div>
						<div class="dy-fx-1">{{item.unitName}}</div>
						<div class="dy-fx-1">{{item.positions.length}}</div>
						<div class="position-item">
							<span class="position">
								<b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 已收款信息 -->
	<div class="gathering border-t" v-if="billData.transactions.length > 0">
		<h3 class="font-16">已收款信息</h3>
		<div class="border-r box-i-shadow br-4 overflow">
			<div class="dy-flex list-head">
				<div class="dy-fx-1"></div>
				<div class="dy-fx-2">收款时间</div>
				<div class="dy-fx-2">支付时间</div>
				<div class="dy-fx-2">收款金额(元)</div>
				<div class="dy-fx-2">收款渠道</div>
				<div class="dy-fx-2">收款人</div>
				<div class="dy-fx-2">状态</div>
				<div class="dy-fx-2">说明</div>
				<div class="dy-fx-2">支付凭证</div>
				<div class="dy-fx-2">操作</div>
			</div>
			<div class="dy-flex list-head br-t-n" v-for="(item, index) in billData.transactions">
				<div class="dy-fx-1">
					<span v-if="item.wstate === 'FFP'" class="color-999">-</span>
					<span :class="{'gathering-select':true, 'g-active':item.flag}" v-else @click="showPlFp(index, item.id, item.flag)"></span>
				</div>
				<div class="dy-fx-2">{{item.createTime | timestamp}}</div>
				<div class="dy-fx-2">{{item.paymentTime | timestamp}}</div>
				<div class="dy-fx-2">{{item.amountTPay | toFixed2 | formatNum}}</div>
				<div class="dy-fx-2">{{item.payWay | billPayWay}}</div>
				<div class="dy-fx-2">{{item.operatorName ? item.operatorName.substr(0,4)+'...' : '--'}}</div>
				<div class="dy-fx-2">
					<span v-if="item.wstate === 'FFP'">已分配</span>
					<span v-else>未分配</span>
				</div>
				<div class="dy-fx-2">
					<span v-if="!item.memo">--</span>
					<a href="javascript:;" @click="getMemo(item.memo, true)" v-else>查看</a>
				</div>
				<div class="dy-fx-2">
					<span v-if="!item.vouchers">--</span>
					<a href="javascript:;" @click="getBigPic(item.vouchers)" v-else>查看</a>
				</div>
				<div class="dy-fx-2">
					--
				</div>
			</div>
		</div>
		
	</div>
	
	<div class="mt-15" v-if="billData.carryOverInfos.length">
		<h3 class="font-16 color-999">结转记录</h3>
		<div class="box-i-shadow br-4 border text-center">
			<div class="dy-flex line-height-40">
				<div class="dy-fx-2 border-r">关联账单</div>
				<div class="dy-fx-2 border-r">结转时间</div>
				<div class="dy-fx-2 border-r">结转费项</div>
				<div class="dy-fx-2 border-r">转入金额</div>
				<div class="dy-fx-2 border-r">转出金额</div>
				<div class="dy-fx-4 border-r">备注</div>
			</div>
			<div class="dy-flex line-height-40 border-t" v-for="item in billData.carryOverInfos">
				<div class="dy-fx-2 border-r"><a target="_blank" :href="'#/billDetail?id='+item.billId+'&aid='+item.contractId+'&ddtab=true'">{{item.billNo}}</a></div>
				<div class="dy-fx-2 border-r">{{item.carryOverDate | timestamp}}</div>
				<div class="dy-fx-2 border-r">{{item.expenseName}}</div>
				<div class="dy-fx-2 border-r">{{item.carryOverAmountInto | formatNum}}</div>
				<div class="dy-fx-2 border-r">{{item.carryOverAmountOut | formatNum}}</div>
				<div class="dy-fx-4 border-r">{{item.memo || '--'}}</div>
			</div>
		</div>
	</div>
	
	<!-- 结算明细 -->
	<div class="account-mx border-t">
		<div class="clearfix mb-10">
			<h3 class="font-16 pull-left color-999">结算明细 <span style="font-weight: normal;color: #f00;font-size: 12px;" v-if="contractData.compareRentAmtFlag == 'Y'">(营业额抽成或与租金取高以实计)</span></h3>
			
		</div>
		<div class="account-wrap border-r br-4 box-i-shadow overflow">
			<div class="list-head dy-flex">
				<div class="dy-fx-2">费项</div>
				<div class="dy-fx-1">状态</div>
				<div class="dy-fx-3">历史结算(元)</div>
				<div class="dy-fx-2">减免金额(元)</div>
				<div class="dy-fx-2">历史结转(元)</div>
				<div class="dy-fx-2">本次应收(元)</div>
			</div>
			<div :class="{isStyleCommis: item.styleFlag}" v-for="(item, index) in billData.expenses" v-if="item.expenseType !== 'T'">
				<div class="list-head br-t-n dy-flex" v-if="!item.styleFlag">
					<div class="dy-fx-2">{{item.name}}</div>
					<div class="dy-fx-1 color-orange">{{item.paymentState | billState}}</div>
					<div class="dy-fx-3 fx-wrap">
						<div class="width-half border-r text-center color-999">应收本金</div>
						<div class="width-half text-center color-999">已收本金</div>
						<div class="width-half border-r border-t text-center">
							<span v-if="item.expenseType != 'CM'">{{item.amountReceived | toFixed2 | formatNum}}</span>
							<span v-if="item.expenseType == 'CM' && billData.commissionFlag == 'Y' && billData.commissonConfirmFlag == 'Y'">{{item.amountReceived | toFixed2 | formatNum}}</span>
							<span v-if="item.expenseType == 'CM' && billData.commissionFlag == 'Y' && billData.commissonConfirmFlag == 'N'"
							 class="color-orange">待确认</span>
							<a v-if="item.expenseType == 'CM' && billData.commissionFlag == 'Y' && billData.commissonConfirmFlag == 'N'"
							 @click="gotoCommisson" href="javascript:;">前往确认</a>
							<a v-if="item.expenseType == 'CM' && billData.commissionFlag == 'Y' && billData.commissonConfirmFlag == 'Y'"
							 @click="gotoCommisson" href="javascript:;">查看</a>
						</div>
						<div class="width-half border-t text-center">
							{{item.amountPayed | toFixed2 | formatNum}}
						</div>
						<div class="width-half border-r border-t text-center color-999">应收滞纳金</div>
						<div class="width-half border-t text-center color-999">已收滞纳金</div>
						<div class="width-half border-r border-t text-center">
							<span v-if="editFlag">{{item.lateFeeReceived | toFixed2 | formatNum}}</span>
							<input type="text" v-if="item.paymentState !== 'APE' && !editFlag" class="form-control text-center" v-model="item.lateFeeReceived"
							 @blur="ifZnjNum(item.lateFeeReceived, index)">
							<span v-if="!editFlag && item.paymentState === 'APE'">{{item.lateFeeReceived | toFixed2 | formatNum}}</span>
						</div>
						<div class="width-half border-t text-center">
							{{item.lateFeePayed | toFixed2 | formatNum}}
						</div>
					</div>
					<div class="dy-fx-2 fx-wrap text-center">
						<div class="width-max color-999">减免本金</div>
						<div class="width-max border-t">
							<span v-if="editFlag">{{item.amountDerate | toFixed2 | formatNum}}</span>
							<span v-if="!editFlag && item.paymentState === 'APE'">{{item.amountDerate | toFixed2 | formatNum}}</span>
							<input type="text" class="form-control text-center" v-if="item.paymentState !== 'APE' && !editFlag" v-model="item.amountDerate"
							 @blur="computedJmBJ(item.amountDerate, item.amountReceived, item.amountPayed, index, item.carryOverTotalAmount)">
						</div>
						<div class="width-max color-999 border-t">减免滞纳金</div>
						<div class="width-max border-t">
							<span v-if="editFlag">{{item.lateFeeDerate | toFixed2 | formatNum}}</span>
							<span v-if="item.paymentState === 'APE' && !editFlag">{{item.lateFeeDerate | toFixed2 | formatNum}}</span>
							<input type="text" class="form-control text-center" v-if="item.paymentState !== 'APE' && !editFlag" v-model="item.lateFeeDerate"
							 @blur="computedJmZNJ(item.lateFeeDerate, item.lateFeeReceived, item.lateFeePayed, index)">
						</div>
					</div>
					<div class="dy-fx-2 fx-wrap text-center">
						<div class="width-max color-999">抵扣本金</div>
						<div class="width-max border-t">
							<span>{{item.carryOverTotalAmount | toFixed2 | formatNum}}</span>							
						</div>
						<div class="width-max color-999 border-t">
							<span style="height:40px;background:rgba(244,244,244,1);display:block;"></span>
						</div>
						<div class="width-max border-t">
							<span style="height:40px;background:rgba(244,244,244,1);display:block;"></span>
						</div>
					</div>
					<div class="dy-fx-2 fx-wrap text-center">
						<div class="width-max color-999">本金</div>
						<div class="width-max border-t">
							{{(item.amountReceived - item.amountPayed - item.amountDerate - item.carryOverTotalAmount ) | toFixed2 | formatNum}}
						</div>
						<div class="width-max color-999 border-t">滞纳金</div>
						<div class="width-max border-t">
							{{(item.lateFeeReceived - item.lateFeePayed - item.lateFeeDerate) | toFixed2 | formatNum}}
						</div>
					</div>
				</div>
				<div class="list-head br-t-n dy-flex" v-if="item.styleFlag">
					<div class="dy-fx-2">{{item.name}}</div>
					<div class="dy-fx-1 color-orange">{{item.paymentState | billState}}</div>
					<div class="dy-fx-3 fx-wrap">
						<div class="width-half border-r text-center color-999">应收本金</div>
						<div class="width-half text-center color-999">已收本金</div>
						<div class="width-half border-r border-t text-center">
							{{item.amountReceived | toFixed2 | formatNum}}
						</div>
						<div class="width-half border-t text-center">
							{{item.amountPayed | toFixed2 | formatNum}}
						</div>
						<div class="width-half border-r border-t text-center color-999">应收滞纳金</div>
						<div class="width-half border-t text-center color-999">已收滞纳金</div>
						<div class="width-half border-r border-t text-center">
							<span>{{item.lateFeeReceived | toFixed2 | formatNum}}</span>
						</div>
						<div class="width-half border-t text-center">
							{{item.lateFeePayed | toFixed2 | formatNum}}
						</div>
					</div>
					<div class="dy-fx-2 fx-wrap text-center">
						<div class="width-max color-999">减免本金</div>
						<div class="width-max border-t">
							{{item.amountDerate | toFixed2 | formatNum}}
						</div>
						<div class="width-max color-999 border-t">减免滞纳金</div>
						<div class="width-max border-t">
							{{item.lateFeeDerate | toFixed2 | formatNum}}
						</div>
					</div>
					<div class="dy-fx-2 fx-wrap text-center">
						<div class="width-max color-999">抵扣本金</div>
						<div class="width-max border-t">
							<span>{{item.carryOverTotalAmount | toFixed2 | formatNum}}</span>							
						</div>
						<div class="width-max color-999 border-t">
							<span style="height:40px;background:rgba(244,244,244,1);display:block;"></span>
						</div>
						<div class="width-max border-t">
							<span style="height:40px;background:rgba(244,244,244,1);display:block;"></span>
						</div>
					</div>
					<div class="dy-fx-2 fx-wrap text-center">
						<div class="width-max color-999">本金</div>
						<div class="width-max border-t">
							{{(item.amountReceived - item.amountPayed - item.amountDerate ) | toFixed2 | formatNum}}
						</div>
						<div class="width-max color-999 border-t">滞纳金</div>
						<div class="width-max border-t">
							{{(item.lateFeeReceived - item.lateFeePayed - item.lateFeeDerate) | toFixed2 | formatNum}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="mt-15" v-if="billData.invoiceInfos.length">
		<h3 class="font-16 color-999">发票记录</h3>
		<div class="box-i-shadow br-4 border text-center">
			<div class="dy-flex line-height-40">
				<div class="dy-fx-2 border-r">发票号码</div>
				<div class="dy-fx-2 border-r">发票代码</div>
				<div class="dy-fx-2 border-r">发票类型</div>
				<div class="dy-fx-2 border-r">开票时间</div>
				<div class="dy-fx-2 border-r">开票金额</div>
				<div class="dy-fx-2 border-r">不含税金额</div>
				<div class="dy-fx-1">税额</div>
			</div>
			<div class="dy-flex line-height-40 border-t" v-for="item in billData.invoiceInfos">
				<div class="dy-fx-2 border-r">{{item.invoiceNo}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceCode}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceTypeVal}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceOutTime | timestamp}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceOutAmount | formatNum}}</div>
				<div class="dy-fx-2 border-r">{{item.taxFree | formatNum}}</div>
				<div class="dy-fx-1">{{item.taxAmount | formatNum}}</div>
			</div>
		</div>
	</div>

	<!-- 临时费项 -->
	<div class="bill-t-item temporary box-i-shadow br-4 mt-15 border" v-if="temporarys > 0">
		<div class="dy-flex">
			<div class="dy-fx-3 border-r">费项</div>
			<div class="dy-fx-3 border-r">结转抵扣(元)</div>
			<div class="dy-fx-3 border-r">费项本金(元)</div>
			<div class="dy-fx-3 border-r">备注</div>
			<div class="dy-fx-1 border-r">状态</div>
			<div class="dy-fx-2">操作</div>
		</div>
		<div class="dy-flex border-t" v-for="(item, index) in billData.expenses" v-if="item.expenseType === 'T'">
			<div class="dy-fx-3 border-r">
				<b class="sh-1">{{item.name}}</b>
				<input type="text" class="form-control text-center hide sh-2 max-assIn" v-model="item.name">
			</div>
			<div class="dy-fx-3 border-r">
				{{item.carryOverTotalAmount | toFixed2 | formatNum}}
			</div>
			<div class="dy-fx-3 border-r">
				<b class="sh-1">{{item.amountReceived | toFixed2 | formatNum}}</b>
				<input type="text" class="form-control text-center hide sh-2 max-assIn" v-model="item.amountTPay">
			</div>
			<div class="dy-fx-3 border-r ellipsis-1" :title="item.memo">
				<b class="sh-1">{{item.memo || '--'}}</b>
				<input type="text" class="form-control text-center hide sh-2 max-assIn" v-model="item.memo">
			</div>
			<div class="dy-fx-1 border-r color-orange">
				{{item.paymentState | billState}}
			</div>
			<div class="dy-fx-2">
				<span v-if="item.paymentState === 'APE' || billData.billState !== 'WTJ'">--</span>
				<span v-else>
					<button type="button" class="icon-Gm-edit js-amend" @click="editCostItem($event)"></button>
					<button type="button" class="icon-Gm-cancel js-cancel-btn hide" data-control="c49" @click="delIdCostItem(item.id)"></button>
					<button type="button" class="icon-Gm-confirm js-confirm-btn hide" @click="editIdCostItem(item.id, item.name, item.memo, item.amountTPay)"></button>
				</span>
			</div>
		</div>
		<div class="dy-flex border-t" v-for="(item, index) in costItem">
			<div class="dy-fx-3 border-r">
				<input type="text" class="form-control text-center max-assIn" v-model="item.name">
			</div>
			<div class="dy-fx-3 border-r">
				--
			</div>
			<div class="dy-fx-3 border-r">
				<input type="text" class="form-control text-center max-assIn" v-model="item.amountTPay" @blur="costItemNum(item.amountTPay, index)">
			</div>
			<div class="dy-fx-3 border-r ellipsis-1">
				<input type="text" class="form-control text-center max-assIn" v-model="item.memo">
			</div>
			<div class="dy-fx-1 border-r color-orange">
				{{item.paymentState | billState}}
			</div>
			<div class="dy-fx-2">
				<button type="button" class="icon-Gm-cancel js-cancel-btn" data-control="c49" @click="delCostItem(index)"></button>
				<button type="button" class="icon-Gm-confirm js-confirm-btn" @click="submitCostItem(index)"></button>
			</div>
		</div>
	</div>

	<!-- 费用结算 -->
	<div class="mt-15 pt-15">
		<h4 class="font-16 font-wt color-999 mb-10">费用结算</h4>
		<div class="table js-table box-i-shadow pt-10 pb-10 br-4 overflow">
			<div class="table-cell col-md-4 border-r">
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">应收本金：</div>
					<div class="pull-right"><b class="ysbj">{{totalYS | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">已收本金：</div>
					<div class="pull-right"><b class="isbj">{{totalIS | absNum | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">减免本金：</div>
					<div class="pull-right"><b class="jmbj">{{totalJM | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">结转抵扣：</div>
					<div class="pull-right"><b class="zzzzz">{{carryOverTotalAmount | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">本次应收本金：</div>
					<div class="pull-right"><span class="color-orange zhbj">{{totalBCYS | absNum | toFixed2 | formatNum}}</span>元</div>
				</div>
			</div>
			<div class="table-cell col-md-4 border-r" style="vertical-align: top;">
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">应收滞纳金：</div>
					<div class="pull-right"><b class="ysznj">{{totalYSznj | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">已收滞纳金：</div>
					<div class="pull-right"><b class="isznj">{{totalISznj | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">减免滞纳金：</div>
					<div class="pull-right"><b class="jmznj">{{totalJMznj | toFixed2 | formatNum}}</b>元</div>
				</div>				
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">本次应收滞纳金：</div>
					<div class="pull-right"><span class="color-orange zhznj">{{totalBCYSznj | toFixed2 | formatNum}}</span>元</div>
				</div>
			</div>
			<div class="table-cell col-md-4 border-r" style="vertical-align: top;">
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">应退本金：</div>
					<div class="pull-right"><b class="ytbj">{{totalYT | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">已退本金：</div>
					<div class="pull-right"><b class="itbj">{{totalIT | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">结转抵扣：</div>
					<div class="pull-right"><b class="itbj">{{carryOverTotalAmountYt | toFixed2 | formatNum}}</b>元</div>
				</div>
				<div class="clearfix bill-line-height">
					<div class="pull-left color-999">本次应退：</div>
					<div class="pull-right"><b class="bcyt color-orange">{{totalBCYT | toFixed2 | formatNum}}</b>元</div>
				</div>
			</div>
			<div class="table-cell col-md-4 text-center">
				<div>本次应收合计(元)</div>
				<div class="js-color-green combined">{{totalYSHJ | absNum | toFixed2 | formatNum}}<span v-if="totalYSHJ > 0">(应收)</span><span
					 v-if="totalYSHJ < 0">(应退)</span></div>
			</div>
		</div>
	</div>

	<!-- 操作记录 -->
	<div class="operaTionArea" :class="{'CZOpenArea':!CZOpenFlag}" v-if="logData.length">
		<ul class="OTA_title">
			<li>操作记录</li>
			<li @click="CZOpenFlag = !CZOpenFlag">
				<span v-if="!CZOpenFlag">展开详情</span>
				<span v-if="CZOpenFlag">收起详情</span>
				<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!CZOpenFlag">
				<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="CZOpenFlag">
			</li>
		</ul>
		<div v-for="(item,index) in logData">
			<ul class="OTA_person">
				<li>操作人：{{item.logUser}}</li>
				<li>{{item.logTime}}</li>
			</ul>
			<div class="OTA_typeBox">
				<div>{{item.operationName}}</div>
				<div class="OTA_type">
					<ul v-for="(item2,index2) in item.logRecords">
						<li v-if="item2.list" v-for="(item3,index3) in item2.list">
							<span v-for="item4 in item3">
								<span v-if="item4.logType == 'text'"><span>{{item4.content}} <span>--</span> </span>
								</span>
								<span v-if="item4.logType == 'change'"><span style="margin-right:20px">{{item4.key}}</span><span>原值</span><span
									 style="margin-right:20px;color: #565E99">“{{item4.before}}”</span><span>修改值</span><span style="color: #565E99">“{{item4.after}}”</span></span>
								<span v-if="item4.logType == 'value'"><span>{{item4.key}}</span><span>“{{item4.content}}”</span></span>
							</span>
						</li>
						<li v-if="!item2.list">
							<span v-for="(item3,index3) in item2.rowData">
								<span v-if="item3.logType == 'text'" :class="'bill_'+item3.logType"><span>{{item3.content}}</span></span>
								<span v-if="item3.logType == 'change'" :class="'bill_'+item3.logType"><span>{{item3.key}}</span><span>原值</span><span
									 style="margin-right:20px">“{{item3.before}}”</span><span>修改值</span><span>“{{item3.after}}”</span></span>
								<span v-if="item3.logType == 'value'" :class="'bill_'+item3.logType"><span>{{item3.key}}</span><span>“{{item3.content}}”</span></span>
							</span>
						</li>
					</ul>
				</div>

			</div>
		</div>
	</div>

	<div class="cost-Settlement mt-15 pt-10 border-b pb-10" v-if="billData.waTransactions.length">
		<div class="color-gray">费用结算</div>
		<div class="mt-10" v-for="(item, index) in billData.waTransactions">
			<div class="color-666">流水 <span class="bg-primary inline text-center font-12" style="width: 15px;height: 15px;border-radius: 50%;">{{ index+1 }}</span></div>
			<div class="line-height-34">
				<span class="color-999">实收金额:</span>
				<span class="color-666">{{item.amountTPay | formatNum}}</span>
			</div>
			<div class="line-height-34">
				<span class="color-999">支付方式:</span>
				<span class="color-666">{{item.payWay | billPayWay}}</span>
			</div>
			<div class="line-height-34">
				<span class="color-999">支付时间:</span>
				<span class="color-666">{{item.paymentTime | timestamp}}</span>
			</div>
			<div class="line-height-34">
				<span class="color-999">支付单号:</span>
				<span class="color-666">{{ item.paymentNo || '--' }}</span>
			</div>
			<div class="line-height-34">
				<span class="color-999">说明:</span>
				<span class="color-666">{{item.memo || '--'}}</span>
			</div>
			<div class="line-height-34">
				<span class="color-999">支付凭证:</span>
				<ul class="inline" v-if="item.vouchers">
					<li v-for="item0 in item.imgs" style="width: 110px;height: 110px;" @click="getBigPic(item.vouchers)">
						<img :src="item0+'?w=110&h=110'">
					</li>
				</ul>
				<span v-if="!item.vouchers">--</span>
			</div>
		</div>
	</div>
	
	<div class="mt-10">
		<div class="color-gray">费用结算</div>
		<div class="line-height-34">
			<span class="color-999">应收：</span>
			<span class="color-666">{{ totalYS | formatNum }}</span>
			<span>元</span>
		</div>
		<div>
			<span class="color-999">实收：</span>
			<span class="color-orange">{{ avAmount | formatNum }}</span>
			<span>元</span>
		</div>
	</div>
	
	<div class="pt-15 mt-10">
		<button class="n-btn-primary br-4 mr-10" @click="approvalButton('审核通过')">审核通过</button>
		<button class="n-btn-outline br-4" @click="approvalButton('审核拒绝')">审核拒绝</button>
	</div>
	
	<hl-dialog :title="billOperate" :visible="billReasonFlag" @on-close="closeDialog">
    <textarea rows="6" :placeholder="placeholderBill" class="form-control" v-model="refusalToPassReason"></textarea>
    <div slot="footer">
        <hl-button type="primary" @on-click="querySubmit">确认</hl-button>
        <hl-button type="outline" @on-click="closeDialog">取消</hl-button>
    </div>
	</hl-dialog>
	
</section>

<script src="modules/contract/scripts/contract_public.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/bill/scripts/bill_examine.js" type="text/javascript" charset="utf-8"></script>

<style media="screen">
	.isStyleCommis {
		background: #f1f1f1;
	}

	.bill-due-to {
		display: flex;
		align-items: center;
	}

	.icon-GM-bill {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: #EA733D;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.init-hover:hover .init-tips {
		display: block;
	}

	.init-tips {
		display: none;
		width: 240px;
		position: absolute;
		left: 50%;
		top: 28px;
		background: #fff;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
		transform: translate(-50%, 0);
		padding: 10px;
		border-radius: 4px;
	}

	.init-tips:before {
		content: '';
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		top: -16px;
		width: 0;
		height: 0;
		border-width: 8px;
		border-style: solid;
		border-color: transparent transparent #fff transparent;
	}

	.operaTionArea {
		margin-top: 20px;
		font-size: 14px;
		color: #666;
		border-bottom: 1px solid #F2F2F2
	}

	.CZOpenArea {
		height: 27px;
		overflow: hidden;
	}

	.OTA_title,
	.OTA_person {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.OTA_typeBox {
		display: flex;
		margin-bottom: 10px;
	}

	.OTA_type {
		flex-wrap: wrap;
	}

	.OTA_type>ul>li {
		margin-bottom: 10px;
	}

	.OTA_typeBox>div:nth-child(1) {
		min-width: 105px;
		margin-right: 40px;
	}

	.OTA_typeBox>div:nth-child(1)::before {
		display: inline-block;
		content: '';
		width: 6px;
		height: 6px;
		background: rgba(216, 216, 216, 1);
		border-radius: 50%;
		margin-right: 10px;
	}

	.OTA_person {
		color: #999;
	}

	.OTA_title>li:nth-child(1) {
		color: #929BA8
	}

	.OTA_title>li:nth-child(2) {
		cursor: pointer;
		color: #337AB7
	}

	.OTA_mask {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #D8D8D8
	}

	.bill_text {
		margin-right: 20px;
	}

	.bill_value {
		margin-right: 20px;
	}

	.bill_change {
		margin-right: 20px;
	}

	.bill_change>span:nth-child(1) {
		margin-right: 20px;
	}

	.OTA_type>ul:nth-child(1)>.bill_text:nth-child(1) {
		margin-right: 0
	}

	.OTA_span {
		color: #565E99;
		margin-right: 20px;
	}

	.bill_value span:nth-child(2),
	.bill_change span:nth-child(3),
	.bill_change span:nth-child(5) {
		color: #565E99
	}
</style>
